<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:p="http://jboss.com/products/seam/pdf"
	template="layout/template.xhtml">

	<ui:define name="body">

		<h:messages globalOnly="true" styleClass="message" errorClass="errormsg" infoClass="infomsg" warnClass="warnmsg"/>
    
		<ui:remove>
		No dynamic columns in RichFaces yet
		http://www.phonescoop.com/phones/compare_select.php
		I could use <rich:separator/> between each property
		</ui:remove>
		<style type="text/css">
.bubble {
	vertical-align: top;
}
		</style>
		<h:form>
		<rich:panel>
			<f:facet name="header">Compare Courses</f:facet>
		<h:panelGrid columns="#{comparedCourses.rowCount + 1}" columnClasses="bubble">
				<rich:panel>
					<f:facet name="header">&#160;</f:facet>
					<p style="margin-top: 0;"><strong>Location:</strong></p>
					<p><strong>Phone:</strong></p>
					<p><strong>Type:</strong></p>
					<p><strong>Number of holes:</strong></p>
					<p><strong>Total Par:</strong></p>
					<p><strong>Grass (Fairway/Greens):</strong></p>
					<p><strong>Price range:</strong></p>
					<ui:remove><p style="margin-bottom: 0;">&#160;</p></ui:remove>
				</rich:panel>
			<c:forEach items="#{comparedCourses.wrappedData}" var="_course">
				<rich:panel style="text-align: center; width: 250px;">
					<f:facet name="header">#{_course.name}</f:facet>
					<p style="margin-top: 0;">#{_course.facility.city}, #{_course.facility.state}</p>
					<p>#{_course.facility.phone}</p>
					<p>#{_course.facility.type}</p>
					<p>#{_course.numHoles}</p>
					<p>#{_course.totalMensPar}</p>
					<p>#{_course.fairways}/#{_course.greens}</p>
					<p>
						<h:outputText value="$" rendered="#{_course.facility.priceRange == 1}"/>
						<h:outputText value="$$" rendered="#{_course.facility.priceRange == 2}"/>
						<h:outputText value="$$$" rendered="#{_course.facility.priceRange == 3}"/>
						<h:outputText value="$$$$" rendered="#{_course.facility.priceRange == 4}"/>
						<h:outputText value="$$$$$" rendered="#{_course.facility.priceRange == 5}"/>
						<ui:remove>#{_course.facility.priceRange}</ui:remove>
					</p>
					<ui:remove><p style="margin-bottom: 0;"><h:commandLink action="#{courseComparison.unselect(_course)}" value="Remove"/></p></ui:remove>
				</rich:panel>
			</c:forEach>
		</h:panelGrid>	
		</rich:panel>
		<div class="actionButtons">
			<s:button view="/CourseList.xhtml" value="Add courses"/>
			<s:button view="/CourseList.xhtml" action="#{courseComparison.reset}" value="Start over"/>
		</div>
		</h:form>

	</ui:define> 

</ui:composition>
